<template>
    <div class="usertop">
        <van-image round width="3rem" height="3rem" :src="userdataimg" />
        <p>欢迎您：{{ userdataname }}</p>
        <p @click="nextlogin">退出登录</p>
    </div>
    <van-grid>
        <van-grid-item icon="home-o" text="待发货" :badge="deliver" @click="godd(deliver1)" />
        <van-grid-item icon="search" text="待收货" :badge="receiving" @click="godd(receiving1)" />
        <van-grid-item icon="friends-o" text="待评价" :badge="complete" @click="godd(complete1)" />
        <van-grid-item icon="setting-o" text="已评价" :badge="evaluate" @click="godd(evaluate1)" />
    </van-grid>
    <div class="userbtm" @click="godd(whole1)">
        <p><van-icon name="location-o" /> <span>全部订单</span></p> <van-icon name="arrow" />
    </div>
    <hr>
    <div class="userbtm" @click="userdatata">
        <p><van-icon name="location-o" /> <span>个人资料</span></p> <van-icon name="arrow" />
    </div>
    <hr>
    <div class="userbtm" @click="goAdressList">
        <p><van-icon name="location-o" /> <span>收货地址</span></p> <van-icon name="arrow" />
    </div>
    <hr>
</template>

<script setup lang='ts'>
import { userapi } from '@/api/http';
import router from '@/router';
import { ref, onMounted } from 'vue';
const userdataname = ref()
const userdataimg = ref()
const deliver = ref()
const receiving = ref()
const complete = ref()
const evaluate = ref()

const deliver1 = ref('deliver')
const whole1 = ref('whole')
const receiving1 = ref('receiving')
const complete1 = ref('complete')
const evaluate1 = ref('evaluate')


// 跳转到全部订单
const godd = (item: any) => {
    router.push({ path: '/userdd', query: { type: item } })
    // router.go('0')
};
//跳转 到收货地址
const goAdressList = () => {
    router.push('/AdressList')
    // router.go('0')
};
// 退出登录
const nextlogin = () => {
    localStorage.removeItem('user_code')
    localStorage.removeItem('userName')
    router.push('/login')
}
onMounted(() => {
    userapi({ user_code: localStorage.getItem('user_code') }).then((res: any) => {
        console.log('我的信息', res);
        userdataname.value = res.user_data.user_title
        userdataimg.value = res.user_data.user_img
        deliver.value = res.deliver_num
        receiving.value = res.receiving_num
        complete.value = res.complete_num
        evaluate.value = res.evaluate_num
    })
})
// 跳转到个人信息资料页
const userdatata = () => {
    router.push({ path: '/userdata' })
}
</script>
<style lang="scss">
#app {
    margin: 0;
    padding: 0;
}

.usertop {
    height: 10rem;
    background-color: pink;
    display: flex;
    flex-direction: column;
    align-items: center;

    .van-image {
        margin-top: 2rem;
    }
}

.userbtm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
</style>